<template>
  <div class="student-log">
    <div class="title">
      <div class="block"></div>
      <div class="word">
        登录日志
      </div>
      <div class="button">
<el-button class="el-button" @click="refresh">刷新</el-button>
      </div>
    </div>
    <div>
      <datashow>
        <template v-slot:form>
          <el-table
            class="el-table"
            ref="multipleTable"
            :data="tableData"
            border
            style="width: 100%"
          ><el-table-column prop="username" label="用户账号"> </el-table-column>
            <el-table-column prop="createTime" label="时间"> </el-table-column>
            <el-table-column prop="ipAddress" label="IP"> </el-table-column>
            <el-table-column prop="ipPosition" label="地区"> </el-table-column>
            <el-table-column prop="loginMethod" label="登录方式">
            </el-table-column>
          </el-table>
        </template>
      </datashow>
    </div>
    <div class="paging">
      <paging :total="total" @size="size" @currentpage="currentpage"></paging>
    </div>
  </div>
</template>

<script>
import datashow from '../../../component/datashow/datashow.vue'
import paging from '../../../component/paging/paging.vue'
import {getStudentLogin} from '../../../api/index'
export default {
  inject: ['reload'],
  name: 'studentLog',
  components: {
    datashow, //数据列表组件
    paging, //分页组件
  },

  data() {
    return {
      current: '',
      pagesize: '',
      total: 0,//一共多少条数据
      userId: '',
      tableData: [],
    }
  },

  mounted() {
    this.$emit('routeName', "studentLog");
    this.getList() 
  },

  methods: {
    getList() {
      getStudentLogin(this.current,this.pagesize).then(data => {
        console.log(data.data.records);
        this.tableData = data.data.records
        this.total = data.data.total
      });   
    },
    currentpage(val) {
      // console.log(val);
      this.current = val //得到新的当前页
      this.getList() //获取新的数据列表
    },
    size(val) {
      // console.log(val);
      this.pagesize = val //得到新当前页的一共几行数据
      this.getList() //获取新的数据列表
    },
    refresh() {
      this.reload()
    },
  },
}
</script>

<style scoped>
.title {
  position: relative;
  display: flex;
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e4e4e4;
  line-height: 50px;
  background-color: #f3f3f3;
}
.block {
  width: 5px;
  height: 30px;
  margin-top: 10px;
  margin-left: 5px;
  background-color: #1abc9c;
}
/* 标题文字 */
.word {
  width: 100px;
  margin-left: 5px;
  color: #999999;
}
.button {
  position: absolute;
  right: 30px;
}
.paging {
  margin-top: 20px;
  text-align: center;
}
</style>
